<template>
  <view class="status-badge" :style="[style]">
    <text class="status-text" :style="[textStyle]"><slot></slot></text>
    <image v-if="type == 3" class="status-image" :style="[style]" :src="useImage('/zuimei-film-oss/1.0.0/images/grey-badge.png')" mode="scaleToFill" />
    <image v-else-if="type == 2" class="status-image" :style="[style]" :src="useImage('/zuimei-film-oss/1.0.0/images/green-badge.png')" mode="scaleToFill" />
    <image v-else class="status-image" :style="[style]" :src="useImage('/zuimei-film-oss/1.0.0/images/theme-badge.png')" mode="scaleToFill" />
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
import { useStyle, useUnit } from "@/utils/style"
export default {
  name: "status-badge",
  mixins: [hook, weixin],
  props: {
    // 类型 1 黄色 2 绿色 3 灰色
    type: {
      type: [String, Number],
      default: "invalid"
    },
    size: {
      type: [Number, String],
      default: 180
    },
    textSize: {
      type: [Number, String],
      default: ""
    },
    textColor: {
      type: String,
      default: ""
    },
    textWeight: {
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {}
  },
  computed: {
    style() {
      const style = {}
      style.width = useUnit(this.size)
      style.height = useUnit(this.size)
      return useStyle(style)
    },
    textStyle() {
      const style = {}
      style.color = useUnit(this.textColor)
      style.fontSize = useUnit(this.textSize)
      style.fontWeight = this.textWeight
      return useStyle(style)
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.status-badge {
  width: 180rpx;
  height: 180rpx;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  .status-text {
    font-size: 26rpx;
    transform: rotate(25deg);
  }
  .status-image {
    top: 0;
    left: 0;
    width: 180rpx;
    height: 180rpx;
    position: absolute;
  }
}
</style>
